<template>
    <div class="flex-main">
        <div class="flex-body">
            <div class="m-ment flex m-more m-addr" v-if="isSend=='send'" @click="toAddresslist">
                <div v-if="addressDef">
                    {{addressDef.Name}} {{addressDef.Phone}}
                    <p>
                        <em>默</em> {{addressDef.Province}} {{addressDef.City}} {{addressDef.Area}} {{addressDef.Address}}
                    </p>
                </div>
                <div v-else>
                    您还没有设置地址
                </div>
                
            </div>
            <div class="m-ment" v-if="isGood">
                <p class="m-mentP">配送方式</p>
                <ul class="m-sendtype mb">
                    <li @click="forShopSelf">
                        <label for="forShop">到店自提</label>
                        <input type="radio" v-model="isSend" value="nosend" name="sendType" id="forShop">
                    </li>
                    <li @click="forShopSend">
                        <label for="forSend">门店配送</label>
                        <input type="radio" v-model="isSend" value="send" name="sendType" id="forSend" ref="forSend">
                    </li>
                </ul>
                <div v-if="isSend=='nosend'">
                    <p class="m-mentP">提取门店</p>
                    <select name="" id="" class="m-shops" v-model="shop.Shop" @change="selectShop">
                        <option :value="item.Shop" v-for="(item,index) in shoplist" :key="index">{{item.Shop}}</option>
                    </select>
                </div>
                
            </div>
            <div class="m-ment ">
                <div class="m-proInfo" v-for="(item,index) in orderDetail" :key="index">
                    <img :src="item.pic" alt="">
                    <div>
                        <p>{{item.name}}</p>
                        <span>&yen;{{item.price}}</span>
                    </div>
                    <em>x{{item.quantity}}</em>
                </div>
                
            </div>
            <div class="m-ment">
                <p class="m-mentP">支付方式</p>
                <ul class="m-choose-type">
                    <li>
                        <img src="@/assets/images/weixin@2x.png" alt="">
                        微信支付
                        <img src="@/assets/images/choose_2@2x.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="flex-bottom">
            <div class="m-toPay">
                <span>&yen;{{param.total_amount}}</span>
                <button @click="payOrder">订单支付</button>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex';
import {submitOrderDetail,getShopList,addressListOne,wxPay} from '@/api/views';
export default {
    name:'',
    data () {
        return {
            isGood:false,       //是否包含产品，产品可选择门店和收货地址
            isSend:'nosend',       //是否门店配送
            orderDetail:[],         //多个详情集合
            moneyTotal:0,       //总订单金额
            quantityTotal:0,    // 总订单数量
            shoplist:[],        //门店列表
            addressDef:'',      //默认地址
            shop:'',            //选择的店铺信息
            base_url:process.env.API_HOST,
            param : {
                AddressId:'',
                quantityTotal:0,
                total_amount:0,
                IsUserGoods:'',
                order_id:'',
                order_sn:'',
                customer_id:'',
                openid:'',
                cartId:'',
                buyData:'',
                shipping_status:0,      //0自取；1配送
                shop_id:'',
            },
        }
    },
    computed:{
        ...mapState({
            buydata:state=>state.projectBuydata.buydata,
            chooseAddr:state=>state.mine.chooseAddr,
            mOpenid:state=>state.user.m_openid,
        })
    },
    methods:{
        // buydata获取项目详情
        getSubmitOrderDetail() {
            let that = this;
            let param = {
                buyData:JSON.stringify(that.buydata),
                customer_id:that.$utils.uid,
            }
            submitOrderDetail(param).then((result) => {
                let list = result.list;
                that.orderDetail = list;
                that.param.total_amount = result.moneyTotal;
                that.param.quantityTotal = result.quantityTotal;
                for (const key of list) {
                    if(key.type==2 || key.type=='2'){    //产品2、项目1、卡项3
                        that.isGood = true;
                    }else{
                        that.isGood = false;
                    }
                }
            }).catch((err) => {
                
            });
        },
        // 选择门店配送
        forShopSend() {
            this.isSend = 'send';
            let chooseAddr = this.chooseAddr;
            if(chooseAddr==''){
                this.getAddressOne();
            }else{
                this.addressDef = chooseAddr;
            }
        },
        // 选择门店自取
        forShopSelf() {
            this.isSend = 'nosend';
        },
        // select具体门店
        selectShop() {
            console.log(this.shop);
        },
        // 订单支付
        payOrder() {
            let that = this;
            let shipping_status = that.isSend=='send' ? 1 : 0;
            let param = {
                AddressId:that.addressDef.id || '',
                quantityTotal:that.quantityTotal,
                total_amount:that.total_amount,
                IsUserGoods:'',
                order_id:'',
                order_sn:'',
                customer_id:that.$utils.uid,
                openid:that.mOpenid,
                cartId:'',
                buyData:JSON.stringify(that.buydata),
                shipping_status:shipping_status,      //0自取；1配送
                shop_id:that.shop.id,
            }
            wxPay(param).then(result=>{
                console.log(result);
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', result.jsApiParameters,
                    function(res) {
                        // WeixinJSBridge.log(res.err_msg);
                        if (res.err_msg == 'get_brand_wcpay_request:ok') {
                            //- 支付成功
                            
                        } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                            // 取消支付
                            

                        } else {
                            that.$toast('支付失败!');
                        }
                    }
                );
            }).catch(error=>{});
        },
        // 跳转地址管理选择地址
        toAddresslist() {
            this.$router.push({path:'/mine/address',query:{isDef:1}});
        },
        // 获取门店数据
        getShop() {
            let that = this;
            getShopList().then(result=>{
                that.shoplist = result.list;
                that.shop = result.list[0];
            })
        },
        // 获取默认地址
        getAddressOne() {
            let that = this;
            addressListOne({
                CustomerId:'0091001709',
                State:0
            }).then(result=>{
                that.addressDef = result;
            })
        }
    },
    mounted() {
        console.log(this.buydata);
        this.getSubmitOrderDetail();
        this.getShop();
        if(this.chooseAddr!=''){
            console.log('有地址');
            this.isSend = 'send';
            this.addressDef = this.chooseAddr;
        }
    },
    created() {     //创建生命周期时，判断用户id是否登录
        
    }
}
</script>
<style lang="less" scoped src="@/less/payment/payment.less"></style>
